<template>
  <div>
    <h1>computed 函数的作用</h1>
    <hr>
    <ul>
      <li>基本工资：{{ monkey }}</li>
      <li>加薪后：{{ addmonkey }}</li>
      <li>
        <button @click="add">加薪</button>
      </li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
import { computed, ref } from 'vue'
export default {
  setup () {
    // 基本工资
    const monkey = ref(1e4)

    // 加薪后
    const addmonkey = computed(() => {
      // return monkey.value + Math.random(1e4)
      return monkey.value + 10000
    })
    // 点击加薪
    const add = () => {
      monkey.value = Math.random() * 2e4 + 1e4
    }

    return { monkey, addmonkey, add }
  }
}
</script>

<style lang="sass" scoped>

</style>
